<template>
  <a-tree-select
    v-model="myValue"
    :tree-data="treeData"
    :show-search="true"
    style="width: 100%"
    :dropdown-style="{
      maxHeight: '400px',
      overflow: 'auto'
    }"
    :placeholder="placeholder"
    searchPlaceholder="输入关键字搜索"
    @change="change"
    :allowClear="isClear"
    :disabled="disabled"
  >
  </a-tree-select>
</template>
<script>
import { findTable } from '@/api/base/table.js'
export default {
  props: {
    // 下拉列表数据
    f_treeData: {
      type: Array,
      default: () => []
    },
    // 绑定字段名称
    field: {
      type: String,
      require: true
    },
    // 当前组件下标
    index: {
      type: Number
    },
    // 父对象下标
    f_index: {
      type: Number
    },
    // 回显值
    value: {
      type: String
    },
    // 是否支持清除
    isClear: {
      type: Boolean,
      default: true
    },
    // 输入框提示文字
    placeholder: {
      type: String,
      default: '请选择字段'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      myValue: this.value || undefined,
      treeData: this.f_treeData || []
    }
  },
  created() {},
  watch: {
    value(val) {
      this.myValue = val
    },
    f_treeData(val) {
      this.treeData = val
    }
  },
  methods: {
    // 初始化
    f_init(database, table) {
      findTable({ database: database, tableName: table }).then(res => {
        // console.log('字段组件', res)
        if (res.code == 0) {
          this.treeData = []
          res.data.data.forEach(v => {
              this.treeData.push({
                title: `${v.fieldName} - ${v.fieldDescription}`,
                value: v.fieldName
              })
            })
        }
      })
    },
    // 树下拉回显
    change(value) {
      this.$emit('f_setField', value, this.field, this.index, this.f_index)
    }
  }
}
</script>

<style lang="less" scoped></style>
